<template>
	<view class="app">
		<load :ready="ready"></load>
		<view class="swiper">
			<u-swiper :list="banList" height="380" border-radius='0'></u-swiper>
		</view>
		<view class="main">
			<view class="title">热销产品</view>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="item.id">

					<view class="box" @click.stop="booking(item.id)">
						<u-image width="100%" height="320rpx"
							:src="item.image"></u-image>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="text txt-hide2">{{item.description}}</view>

							<view class="btnbox">
								<view class="price">￥<text>{{item.price}}</text></view>
								<view class="btns">
									<u-button size="medium" hover-class="none" :custom-style="customStyle" @click.stop="booking(item.id)" shape="circle"
										type="success">下单</u-button>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		
			<u-modal v-model="showArg" @confirm="confirmArg" confirm-text="去签署"  :show-cancel-button="true" content="未签署用气协议"></u-modal>
	</view>
</template>


<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	export default {
		mixins: [mixinsBase],
		components: {

		},
		data() {
			return {
				ready: true,
				banList: [
				],
				customStyle:{
					width:'100%',
					height:'60rpx',
					lineHeight:'60rpx',
                    background:'#0093dd',
				},
				list:[],
				total:0,
				
				isArg:null,
				showArg:false,
			};
		},
		onLoad() {
			this.getInit();
			this.getList();
		},
		onShow(){
			this.getUserInfo();
		},
		onReady() {},
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }

		},
		methods: {
			confirmArg(){
				this.showArg=false;
				this.link('/pages/user/arg_info')
			},
			async getArgInfo(){
				let res = await this.$api.isAgreement();
				if (res.data.code == this.$config.RESOK) {
					this.isArg = true
				} else {
					this.showArg=true;
					this.isArg = false
				}
			},
			async getUserInfo(){
				try{
					let res = await this.$api.getUserList();
					if(res.data.id){
						res.data = this.$user.normalFilter(res.data)
						let userInfo = {
							...this.userInfo,
							...res.data,
						}
						this.user = res.data
						this.setUserInfo(userInfo)
						this.getArgInfo();
					} else{
						uni.removeStorageSync('userInfo')
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				}catch(e){
					//TODO handle the exception
					uni.removeStorageSync('userInfo')
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
			},
			async booking(id){
				// add 是加1  reduce是减1
				if(!this.userInfo){
					uni.reLaunch({
						url:'/pages/login/login'
					})
					return
				}
				
				if(!this.isArg){
					this.showArg = true;
					return
				}
				if(!this.userInfo.address || !this.userInfo.telephone ){
					const [errShow, resShow] = await uni.showModal({
						title:'提示',
						content:'当前没有配送地址，是否去新建地址？',
						cancelText:'取消',
						confirmText:'确认',
					})
					if(resShow.confirm){
						this.link('/pages/user/addres_info')
					}
					return
				}
				
				uni.showLoading();
				
				
				const c = await this.$api.clearCart();
				
				let params = {
					goods_id: id
				}
				let res = await this.$api.booking(params);
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					this.link(`/pages/index/place_order?id=${id}`)
				} else if(res.data.code == -1){
					uni.removeStorageSync('userInfo')
					uni.reLaunch({
						url:'/pages/login/login'
					})
				} else{
					this.$message.error(res.data.msg);
				}
			},
			async getInit() {
				let res = await this.$api.getBanner();
				if (res.data.code == this.$config.RESOK) {
					this.banList = res.data.data.map(item=>{
						return {
							image: this.$config.httpImgs + item.image
						}
					})
					
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async getList() {
				// let res = await this.$api.goodsList({
				// 	type:4
				// });
				let res = await this.$api.goodsList({
					type:1
				});
				if (res.data.code == this.$config.RESOK) {
					let list = res.data.data.data || [];
					// list.forEach(item=>{
					// 	item.image = this.$config.httpImgs + item.image
					// })
					this.total = res.data.data.total;
					this.list = list;
				} else {
					this.$message.error(res.data.msg);
				}
			},
			...mapActions(['setUserInfo']),
		},
		computed: {
			...mapState({
				userInfo: 'userInfo',
			})
		},
	};
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.main {
		.title {
			font-size: 18px;
			font-weight: bold;
			padding: 30rpx 30rpx;
		}
	}
	
	
	
.list{
	padding: 10rpx 20rpx;
	display: flex;
	flex-wrap: wrap;
	.item{
		width: 50%;
		margin-bottom: 20rpx;
	}
	.text{
		margin-bottom: 10rpx;
	}
	.info{
		flex: 1;
		border-radius: 0 0 5px 5px;
	}
	.price{
		font-size: 14px;
		color: $color-red;
		text{
			font-size: 20px;
		}
	}
	.name{
		font-size: 16px;
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		color: #333;
	}
	.text{
		font-size: 14px;
		line-height: 1.6;
		max-height: 44px;
	}
	.btnbox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btns{
			width: 160rpx;
		}
	}
	.box{
		padding: 0 10rpx;
	}
}
</style>